<script setup>
import dayjs from 'dayjs'

const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  node: {
    type: Object,
    required: true,
  },
})

const { columns, node } = toRefs(props)

const rowItemTotal = inject('rowItemTotal')

const startTime = inject('startTime')
const symbolExtend = inject('symbolExtend')
const symbolIndex = inject('symbolIndex')
const symbolLevel = inject('symbolLevel')
const defaultOptions = inject('defaultOptions')
const { itemWidth, rowHeight, type } = toRefs(defaultOptions)

const level = node.value[symbolLevel]

const stripBarStyle = computed(() => {
  let width, left
  const start = dayjs(node.value.data.startTime)
  const end = dayjs(node.value.data.endTime)

  if (type.value === 'hour') {
    const startIsMorning = start.hour() < 12 || (start.hour() === 12 && start.minute() === 0)
    const endIsMorning = end.hour() < 12 || (end.hour() === 12 && end.minute() === 0)
    width = `${
      Math.floor(dayjs(node.value.data.endTime).diff(node.value.data.startTime, 'day', true)) * itemWidth.value +
        (endIsMorning ? 1 : 2) * itemWidth.value || 0
    }px`

    left = `${
      Math.floor(dayjs(node.value.data.startTime).diff(startTime.value, 'day', true)) * itemWidth.value -
        (startIsMorning ? 0 : itemWidth.value) || 0
    }px`
  } else {
    width = `${(end.diff(start, type.value) + 1) * itemWidth.value || 0}px`
    left = `${start.diff(startTime.value, type.value) * itemWidth.value || 0}px`
  }

  return {
    width,
    left,
    height: `${rowHeight.value * 0.4}px`,
    top: '50%',
    transform: 'translateY(-50%)',
    borderRadius: `${rowHeight.value}px`,
    background: filePriorityBg(node.value.data.taskPriority),
  }
})

function filePriorityBg(val) {
  if (val === 1) {
    return 'linear-gradient(180deg, #FF9589 0%, #F62C15 100%)'
  } else if (val === 2) {
    return 'linear-gradient(180deg, #FFD59F 0%, #FF8F00 100%)'
  } else if (val === 3) {
    return 'linear-gradient(180deg, #AAC9FF 0%, #015EFF 100%)'
  } else if (val === 4) {
    return 'linear-gradient(180deg, #D3DDEB 0%, #ADB6C2 100%)'
  } else {
    return 'linear-gradient(180deg, #74F1A6 0%, #3FC498 100%)'
  }
}

const expandIconIndex = computed(() => {
  const index = columns.value.findIndex((i) => !i.type)
  return index > -1 ? index : 0
})
</script>

<template>
  <div class="gantt-chart-row">
    <div class="gantt-chart-table-row">
      <div
        class="gantt-chart-table-cell"
        :class="{ 'is-hasChild': !node.children.length }"
        v-for="(col, colIndex) in columns"
        :key="colIndex"
        :style="{ ...col.style, paddingLeft: colIndex === 0 ? `${level ? level * 13 : 5}px` : null }">
        <template v-if="colIndex === expandIconIndex">
          <div class="expand-icon" v-if="node.children.length" @click="node.extend()">
            <SvgIcon :name="node[symbolExtend] ? 'arrow-bottom-light' : 'arrow-right'" size="10"></SvgIcon>
            <!--<el-icon>-->
            <!--  <Minus v-if="node[symbolExtend]" />-->
            <!--  <Plus v-else />-->
            <!--</el-icon>-->
          </div>
          <div v-else class="expand-icon-placeholder"></div>
        </template>
        <!--           :disabled="node.data[col.key] ? false : true" -->
        <el-tooltip
          class="box-item"
          effect="dark"
          :disabled="node.data['isAdd'] || node.data['isEdit']"
          :content="(node.data[col.key] || '') + ''"
          placement="top-start">
          <RowTableCell :node="node" :column="col"></RowTableCell>
        </el-tooltip>
      </div>
    </div>
    <div class="gantt-chart-gantt-row" :style="{ minHeight: `${rowHeight}px`, lineHeight: `${rowHeight - 10}px` }">
      <div class="gantt-strip-bar" :style="stripBarStyle"></div>
      <div
        class="gantt-chart-gantt-cell"
        v-for="item in rowItemTotal"
        :key="item"
        :style="{ width: `${itemWidth}px` }"></div>
    </div>
  </div>
  <div v-show="node[symbolExtend]">
    <Row v-for="item in node.children" :key="item.id" :columns="columns" :node="item"></Row>
  </div>
</template>

<style scoped lang="scss">
.gantt-chart-row {
  display: flex;
  // border-bottom: var(--elp-border);
  &:hover {
    background-color: var(--elp-bg-color-page);
    .gantt-chart-table-row {
      background-color: var(--elp-bg-color-page);
    }
  }
  .gantt-chart-table-row {
    display: flex;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: var(--elp-bg-color);
    .is-hasChild {
      color: var(--elp-color-info-dark-2);
    }
    .gantt-chart-table-cell {
      @include use-flex(center);
      padding: 5px;
      border-right: var(--elp-border);

      .expand-icon {
        font-size: 15px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
      }
      .expand-icon-placeholder {
        height: 20px;
        width: 20px;
      }
    }
  }
  .gantt-chart-gantt-row {
    position: relative;
    display: flex;
    overflow: hidden;
    background-color: var(--elp-fill-color-lighter);
    .gantt-chart-gantt-cell {
      // border: 0;
      &:not(:last-child) {
        border-right: var(--elp-border);
      }
      // &:nth-child(odd) {
      //   border-right: var(--elp-border);
      // }
      &:last-child {
        border-right: var(--elp-border);
      }
    }
    .gantt-strip-bar {
      position: absolute;
      //background-color: var(--elp-color-primary-light-3);
      z-index: 2;
    }
  }
}
</style>
